<template>
  <el-card>
    <div slot="header" class="card-header">
      <span>{{ this.$route.meta.title }}</span>
      <div class="header-select">
        <i class="el-icon-menu"></i>
        <span>选择项：</span>
        <el-select v-model="selectVal" @change="selectChange">
          <el-option
            v-for="(item, index) in selectOptions"
            :key="index"
            :label="item.title"
            :value="index"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-card shadow="never">
      <div slot="header" class="card-header">
        <el-button type="primary" size="mini">
          {{ selectOptions[selectVal].options[selectValB] }}数据分析与报告生成
        </el-button>
        <el-select v-model="selectValB" @change="selectChange" size="mini">
          <el-option
            v-for="(item, index) in selectOptions[selectVal].options"
            :key="index"
            :label="item"
            :value="index"
          >
          </el-option>
        </el-select>
      </div>
      <el-row :gutter="20" class="echart">
        <el-col :span="24">
          <el-card class="mgb" shadow="never">
            <EchartMap
              :mapData="mapData"
              :title="selectOptions[selectVal].options[selectValB]"
            ></EchartMap>
          </el-card>
        </el-col>
        <el-col :span="12" class="mgb">
          <el-card shadow="never">
            <EchartBar
              :barData="barData"
              :title="selectOptions[selectVal].options[selectValB]"
            ></EchartBar>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <EchartLine
              :lineData="lineData"
              :title="selectOptions[selectVal].options[selectValB]"
            ></EchartLine>
          </el-card>
        </el-col>
      </el-row>
      <TableA v-if="tableDataA.length !== 0" :tableData="tableDataA" />
      <Table v-else :tableData="tableData"></Table>
    </el-card>
  </el-card>
</template>

<script>
import EchartMap from '../components/EchartMap'
import EchartBar from '../components/EchartBar'
import EchartLine from '../components/EchartLine'
import Table from './components/Table'
import variable from './variable'
import tableDataA from '../table_data'
import TableA from '@/components/Table'
export default {
  components: {
    Table,
    EchartMap,
    EchartBar,
    EchartLine,
    TableA
  },

  data() {
    return {
      selectVal: 0,
      selectValB: 0,
      selectOptions: variable,
      mapData: {},
      barData: {},
      lineData: [],
      tableData: []
    }
  },

  computed: {
    selectName() {
      return this.selectOptions[this.selectVal].options[this.selectValB]
    },
    tableDataA() {
      if (this.selectName === '省公司赠费退费情况监控模型') {
        return this.$basefn.toTableData(tableDataA[2])
      } else if (this.selectName === '物联网卡被用于手机终端模型') {
        return this.$basefn.toTableData(tableDataA[3])
      }
      return []
    }
  },

  methods: {
    randomsort() {
      return Math.random() > 0.5 ? -1 : 1
    },

    selectChange() {
      this.mapRandom()
      this.barRandom()
      this.lineRandom()
      this.tableRandom()
    },

    tableRandom() {
      let arr = [
        {
          columnA: '北京',
          columnB: '12232',
          columnC: '是',
          columnD: '2020.1',
          columnE: '076423'
        },
        {
          columnA: '湖北',
          columnB: '12121',
          columnC: '是',
          columnD: '2020.1',
          columnE: '076432'
        },
        {
          columnA: '广东',
          columnB: '17632',
          columnC: '是',
          columnD: '2020.6',
          columnE: '076321'
        },
        {
          columnA: '四川',
          columnB: '19764',
          columnC: '是',
          columnD: '2020.7',
          columnE: '073331'
        },
        {
          columnA: '新疆',
          columnB: '11241',
          columnC: '是',
          columnD: '2020.1',
          columnE: '076531'
        },
        {
          columnA: '天津',
          columnB: '8976',
          columnC: '否',
          columnD: '2020.4',
          columnE: '072131'
        },
        {
          columnA: '湖南',
          columnB: '6443',
          columnC: '是',
          columnD: '2020.3',
          columnE: '076731'
        },
        {
          columnA: '河南',
          columnB: '14231',
          columnC: '是',
          columnD: '2020.2',
          columnE: '076761'
        },
        {
          columnA: '陕西',
          columnB: '34234',
          columnC: '是',
          columnD: '2020.2',
          columnE: '076891'
        },
        {
          columnA: '贵州',
          columnB: '7856',
          columnC: '是',
          columnD: '2020.1',
          columnE: '076991'
        },
        {
          columnA: '山东',
          columnB: '8766',
          columnC: '是',
          columnD: '2020.2',
          columnE: '076881'
        },
        {
          columnA: '河北',
          columnB: '12231',
          columnC: '是',
          columnD: '2020.3',
          columnE: '076651'
        }
      ]
      this.tableData = arr.sort(this.randomsort)
    },

    mapRandom() {
      let arr = [
        '北京',
        '上海',
        '广东',
        '深圳',
        '河南',
        '天津',
        '四川',
        '重庆',
        '贵州',
        '新疆',
        '山东',
        '浙江'
      ]
      let sortArr = arr.sort(this.randomsort)
      let dataA = sortArr.slice(0, 3).map(item => {
        return {
          name: item,
          value: 9999
        }
      })
      let dataB = sortArr
        .slice(3, arr.length)
        .slice(0, 3)
        .map(item => {
          return {
            name: item,
            value: 0
          }
        })
      this.mapData = {
        dataA,
        dataB
      }
    },

    barRandom() {
      let arr = [
        '北京',
        '上海',
        '广东',
        '深圳',
        '河南',
        '天津',
        '四川',
        '重庆',
        '贵州',
        '新疆'
      ]
      let arrVal = []
      for (let index = 0; index < 10; index++) {
        arrVal.push(this.$basefn.randomNum(0.1, 3, 1))
      }
      this.barData = {
        dataA: arr.sort(this.randomsort),
        dataB: arrVal.sort()
      }
    },

    lineRandom() {
      let arr = []
      for (let index = 0; index < 8; index++) {
        arr.push(this.$basefn.randomNum(0.1, 3, 1))
      }
      this.lineData = arr
    }
  },

  created() {
    this.selectChange()
  }
}
</script>

<style lang="scss" scoped>
.mgb {
  margin-bottom: 20px;
}
.header-select {
  display: flex;
  align-items: center;
  i {
    font-size: 22px;
    margin-right: 10px;
  }
}
.echart {
  /deep/ .el-card__body {
    height: 500px !important;
  }
}
</style>
